<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能控制中心</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#0F172A',
            accent: '#36CFC9',
            neutral: '#F1F5F9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            elevator: {
              main: '#2563eb',
              door: '#94a3b8',
              shaft: '#1e293b',
              button: '#64748b',
              buttonActive: '#f97316'
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .sidebar-item-active {
        @apply bg-primary/10 text-primary border-l-4 border-primary;
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
      }
      .animate-pulse-slow {
        animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      }
      /* 电梯相关工具类 */
      .elevator-door {
        @apply bg-elevator-door transition-all duration-700 ease-in-out;
      }
      .elevator-button {
        @apply w-10 h-10 rounded-full bg-elevator-button text-white flex items-center justify-center cursor-pointer transition-all duration-300 hover:bg-elevator-buttonActive;
      }
      .elevator-button.active {
        @apply bg-elevator-buttonActive scale-110;
      }
      .floor-indicator {
        @apply absolute top-4 left-1/2 -translate-x-1/2 text-white text-xl font-bold;
      }
      /* OTA检查动画相关样式 */
      .ota-step {
        @apply flex items-center justify-between p-4 border-b border-gray-100 last:border-0 transition-all duration-500;
      }
      .step-active {
        @apply bg-blue-50 border-l-4 border-primary pl-3 -ml-4;
      }
      .step-completed {
        @apply bg-green-50;
      }
      .step-failed {
        @apply bg-red-50;
      }
      .step-icon {
        @apply w-10 h-10 rounded-full flex items-center justify-center transition-all duration-500;
      }
      .progress-bar {
        @apply h-2 bg-gray-200 rounded-full overflow-hidden transition-all duration-500;
      }
      .progress-fill {
        @apply h-full bg-primary transition-all duration-1000 w-0;
      }
      .pulse-ring {
        @apply absolute w-full h-full rounded-full border-2 border-primary/30 animate-ping;
      }
      .pulse-dot {
        @apply absolute w-3 h-3 bg-primary rounded-full;
      }
      .update-badge {
        @apply absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full w-5 h-5 flex items-center justify-center animate-pulse;
      }
    }
    
    /* 电梯井道样式 */
    .elevator-shaft {
      width: 160px;
      height: 556px; /* 3层楼高度，每层180px */
      background-color: theme('colors.elevator.shaft');
      position: relative;
      overflow: hidden;
      border: 8px solid #8e9196;
      border-radius: 4px;
    }
    
    /* 电梯轿厢样式 */
    .elevator-cab {
      width: 135px;
      height: 170px;
      background-color: theme('colors.elevator.main');
      position: absolute;
      bottom: 5px; /* 初始在1楼 */
      left: 5px;
      border-radius: 4px;
      transition: transform 1.5s ease-in-out;
      transform: translateY(0);
    }
    
    /* 电梯门样式 */
    .elevator-doors {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    
    .door-left, .door-right {
      height: 100%;
      width: 50%;
      position: absolute;
    }
    
    .door-left {
      left: 0;
      border-right: 1px solid #64748b;
    }
    
    .door-right {
      right: 0;
      border-left: 1px solid #64748b;
    }
    
    /* 开门状态 */
    .doors-open .door-left {
      transform: translateX(-100%);
    }
    
    .doors-open .door-right {
      transform: translateX(100%);
    }
    
    /* 楼层标记 */
    .floor-marker {
      position: relative;
      width: 100%;
      height: 2px;
      background-color: #64748b;
      left: 0;
    }
    
    /* 楼层按钮面板 */
    .floor-panel {
      transition: all 0.3s ease;
    }
    
    .floor-panel:hover {
      transform: scale(1.05);
    }
  </style>
</head>

<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex overflow-hidden">
  <!-- 左侧导航栏 -->
  <aside class="bg-white w-64 shadow-md z-10 hidden md:block transition-all duration-300 ease-in-out">
    <!-- 品牌标识 -->
    <div class="p-5 border-b border-gray-200">
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
          <i class="fa fa-cogs text-white text-xl"></i>
        </div>
        <h1 class="text-xl font-bold text-secondary">智能控制中心</h1>
      </div>
    </div>
    
    <!-- 导航菜单 -->
    <nav class="py-6 px-3">
      <p class="text-xs uppercase text-gray-500 font-semibold px-4 mb-3">控制功能</p>
      
      <a href="#elevator" class="sidebar-item-active flex items-center px-4 py-3 mb-1 rounded-md cursor-pointer">
        <i class="fa fa-building-o w-6 text-center"></i>
        <span class="ml-3">电梯控制</span>
      </a>
      
      <a href="#gate" class="flex items-center px-4 py-3 mb-1 rounded-md text-gray-600 hover:bg-gray-100 transition-colors cursor-pointer">
        <i class="fa fa-sign-out w-6 text-center"></i>
        <span class="ml-3">闸机控制</span>
      </a>
      
      <a href="#robot" class="flex items-center px-4 py-3 mb-1 rounded-md text-gray-600 hover:bg-gray-100 transition-colors cursor-pointer">
        <i class="fa fa-android w-6 text-center"></i>
        <span class="ml-3">机器人状态</span>
      </a>
      
      <div class="mt-8 pt-6 border-t border-gray-200">
        <p class="text-xs uppercase text-gray-500 font-semibold px-4 mb-3">系统</p>
        
        <a href="#settings" class="sidebar-item-active flex items-center px-4 py-3 mb-1 rounded-md cursor-pointer">
          <i class="fa fa-cog w-6 text-center relative">
            <span id="updateIndicator" class="update-badge hidden">!</span>
          </i>
          <span class="ml-3">设置</span>
        </a>
        
        <a href="#" class="flex items-center px-4 py-3 mb-1 rounded-md text-gray-600 hover:bg-gray-100 transition-colors cursor-pointer">
          <i class="fa fa-question-circle w-6 text-center"></i>
          <span class="ml-3">帮助中心</span>
        </a>
      </div>
    </nav>
  </aside>
  
  <!-- 主内容区域 -->
  <main class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部状态栏 -->
    <header class="bg-white shadow-sm px-6 py-4 flex justify-between items-center">
      <button class="md:hidden text-gray-500 focus:outline-none" id="menu-toggle">
        <i class="fa fa-bars text-xl"></i>
      </button>
      
      <div class="flex items-center space-x-6">
        <div class="relative">
          <input type="text" placeholder="搜索..." class="pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary w-64 transition-all">
          <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
        </div>
        
        <div class="flex items-center space-x-4">
          <button class="relative p-2 text-gray-500 hover:text-primary transition-colors">
            <i class="fa fa-bell text-xl"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          
          <div class="flex items-center space-x-2">
            <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover">
            <span class="hidden md:inline font-medium">管理员</span>
          </div>
        </div>
      </div>
    </header>
    
    <!-- 内容滚动区域 -->
    <div class="flex-1 overflow-y-auto p-6 bg-gray-50">
      <!-- 电梯控制模块 -->
      <section id="elevator" class="mb-10">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-secondary">电梯控制</h2>
          <div class="text-sm text-gray-500">
            <span id="current-time">2025-11-18 10:30:00</span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- 电梯动画展示 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover lg:col-span-1">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">电梯动画监控</h3>
                <p class="text-sm text-gray-500">实时显示电梯状态</p>
              </div>
              <span class="px-3 py-1 bg-success/10 text-success text-xs rounded-full" id="elevatorStatusText">运行中</span>
            </div>
            
            <!-- 电梯井道和轿厢 -->
            <div class="elevator-shaft mx-auto">
              <!-- 楼层标记 -->
              <div class="floor-marker" style="top: 0;"></div>    <!-- 3楼 -->
              <div class="floor-marker" style="top: 180px;"></div> <!-- 2楼 -->
              <div class="floor-marker" style="top: 360px;"></div> <!-- 1楼 -->
              
              <!-- 楼层指示器 -->
              <div class="floor-indicator">3F</div>
              <div class="floor-indicator" style="top: 180px;">2F</div>
              <div class="floor-indicator" style="top: 360px;">1F</div>
              
              <!-- 电梯轿厢 -->
              <div id="elevatorCab" class="elevator-cab">
                <div id="elevatorDoors" class="elevator-doors">
                  <div class="door-left elevator-door"></div>
                  <div class="door-right elevator-door"></div>
                </div>
                <!-- 轿厢内按钮 -->
                <!-- <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex flex-col gap-2">
                  <div class="elevator-button floor-btn" data-floor="3">3</div>
                  <div class="elevator-button floor-btn" data-floor="2">2</div>
                  <div class="elevator-button floor-btn" data-floor="1">1</div>
                </div> -->
                <!-- 当前楼层显示 -->
                <div class="absolute top-3 left-3 bg-white text-elevator-shaft px-2 py-1 rounded text-sm font-bold" id="currentFloorDisplay">1F</div>
              </div>
            </div>
          
          </div>
          
          <!-- 电梯列表 -->
          <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-xl shadow-sm p-6">
            <!-- 电梯状态信息 -->
            <div class="mt-6 space-y-3">
              <div>
                <span class="text-gray-600">当前楼层:</span>
                <span id="statusFloor" class="font-semibold ml-2">1F</span>
              </div>
              <div>
                <span class="text-gray-600">运行状态:</span>
                <span id="statusRunning" class="font-semibold ml-2">静止</span>
              </div>
              <div>
                <span class="text-gray-600">门状态:</span>
                <span id="statusDoors" class="font-semibold ml-2">关闭</span>
              </div>
            </div>
            
            <!-- 门控制按钮 -->
            <div class="mt-4 flex gap-3">
              <button id="openDoorBtn" class="flex-1 px-4 py-2 bg-success text-white rounded-lg text-sm hover:bg-success/90 transition-colors">
                <i class="fa fa-door-open mr-1"></i> 开门
              </button>
              <button id="closeDoorBtn" class="flex-1 px-4 py-2 bg-danger text-white rounded-lg text-sm hover:bg-danger/90 transition-colors">
                <i class="fa fa-door-closed mr-1"></i> 关门
              </button>
            </div>
            </div>

            <!-- 电梯控制面板 -->
            <div class="bg-white rounded-xl shadow-sm p-6">
              <h3 class="font-semibold text-lg mb-4">电梯调度</h3>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">选择电梯</label>
                  <select id="elevatorSelect" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <option value="1">电梯 #1</option>
                  </select>
                </div>
                
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">目标楼层</label>
                  <select id="targetFloorSelect" class="w-full p-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                    <option value="1">1楼</option>
                    <option value="2">2楼</option>
                    <option value="3">3楼</option>
                  </select>
                </div>
                
                <div class="flex items-end">
                  <button id="sendCommandBtn" class="w-full px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    发送指令
                  </button>
                </div>
              </div>
              
              <!-- 楼层按钮快捷操作 -->
              <div class="mt-6">
                <h4 class="font-medium text-gray-700 mb-3">快捷楼层选择</h4>
                <div class="flex flex-wrap gap-2">
                  <button class="quick-floor-btn elevator-button" data-floor="1">1</button>
                  <button class="quick-floor-btn elevator-button" data-floor="2">2</button>
                  <button class="quick-floor-btn elevator-button" data-floor="3">3</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 闸机控制模块 -->
      <section id="gate" class="mb-10 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-secondary">闸机控制</h2>
          <div class="text-sm text-gray-500">
            <span id="current-time-gate">2025-11-18 10:30:00</span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <!-- 闸机1 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">主入口闸机</h3>
                <p class="text-sm text-gray-500">前门大厅</p>
              </div>
              <span class="px-3 py-1 bg-success/10 text-success text-xs rounded-full">正常</span>
            </div>
            
            <div class="flex justify-center my-4">
              <div class="w-24 h-24 rounded-full bg-success/10 flex items-center justify-center">
                <i class="fa fa-unlock-alt text-success text-3xl"></i>
              </div>
            </div>
            
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm">
                <span class="text-gray-500">今日通行:</span>
                <span class="font-medium ml-1">128</span>
              </div>
              <button class="px-3 py-1 bg-danger/10 text-danger rounded-lg text-sm hover:bg-danger/20 transition-colors">
                锁定
              </button>
            </div>
          </div>
          
          <!-- 闸机2 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">侧门闸机</h3>
                <p class="text-sm text-gray-500">西翼通道</p>
              </div>
              <span class="px-3 py-1 bg-success/10 text-success text-xs rounded-full">正常</span>
            </div>
            
            <div class="flex justify-center my-4">
              <div class="w-24 h-24 rounded-full bg-success/10 flex items-center justify-center">
                <i class="fa fa-unlock-alt text-success text-3xl"></i>
              </div>
            </div>
            
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm">
                <span class="text-gray-500">今日通行:</span>
                <span class="font-medium ml-1">45</span>
              </div>
              <button class="px-3 py-1 bg-danger/10 text-danger rounded-lg text-sm hover:bg-danger/20 transition-colors">
                锁定
              </button>
            </div>
          </div>
          
          <!-- 闸机3 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">员工通道</h3>
                <p class="text-sm text-gray-500">北翼走廊</p>
              </div>
              <span class="px-3 py-1 bg-warning/10 text-warning text-xs rounded-full">异常</span>
            </div>
            
            <div class="flex justify-center my-4">
              <div class="w-24 h-24 rounded-full bg-warning/10 flex items-center justify-center">
                <i class="fa fa-exclamation-triangle text-warning text-3xl"></i>
              </div>
            </div>
            
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm">
                <span class="text-gray-500">今日通行:</span>
                <span class="font-medium ml-1">76</span>
              </div>
              <button class="px-3 py-1 bg-primary/10 text-primary rounded-lg text-sm hover:bg-primary/20 transition-colors">
                查看详情
              </button>
            </div>
          </div>
          
          <!-- 闸机4 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">货物通道</h3>
                <p class="text-sm text-gray-500">东翼后勤</p>
              </div>
              <span class="px-3 py-1 bg-danger/10 text-danger text-xs rounded-full">关闭</span>
            </div>
            
            <div class="flex justify-center my-4">
              <div class="w-24 h-24 rounded-full bg-danger/10 flex items-center justify-center">
                <i class="fa fa-lock text-danger text-3xl"></i>
              </div>
            </div>
            
            <div class="flex justify-between items-center mt-2">
              <div class="text-sm">
                <span class="text-gray-500">今日通行:</span>
                <span class="font-medium ml-1">0</span>
              </div>
              <button class="px-3 py-1 bg-success/10 text-success rounded-lg text-sm hover:bg-success/20 transition-colors">
                开启
              </button>
            </div>
          </div>
        </div>
        
        <!-- 闸机操作日志 -->
        <div class="mt-6 bg-white rounded-xl shadow-sm p-6">
          <h3 class="font-semibold text-lg mb-4">最近操作日志</h3>
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">时间</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">闸机</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作员</th>
                  <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-200">
                <tr>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">10:25:32</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">主入口闸机</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">远程开启</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">系统自动</td>
                  <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">成功</span></td>
                </tr>
                <tr>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">09:18:45</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">员工通道</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">故障上报</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">安保人员</td>
                  <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">处理中</span></td>
                </tr>
                <tr>
                  <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">08:30:12</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm font-medium">货物通道</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">远程关闭</td>
                  <td class="px-4 py-3 whitespace-nowrap text-sm">管理员</td>
                  <td class="px-4 py-3 whitespace-nowrap"><span class="px-2 py-1 text-xs font-medium bg-success/10 text-success rounded-full">成功</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
      
      <!-- 机器人状态模块 -->
      <section id="robot" class="mb-10 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-secondary">机器人状态</h2>
          <div class="text-sm text-gray-500">
            <span id="current-time-robot">2025-11-18 10:30:00</span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <!-- 机器人1 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">清洁机器人 A1</h3>
                <p class="text-sm text-gray-500">1号区域</p>
              </div>
              <span class="px-3 py-1 bg-success/10 text-success text-xs rounded-full">工作中</span>
            </div>
            
            <div class="flex justify-center my-4">
              <img src="https://picsum.photos/id/96/120/120" alt="清洁机器人" class="w-32 h-32 object-cover rounded-lg">
            </div>
            
            <div class="mt-4 space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-500">电池电量:</span>
                <span class="font-medium">78%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-success h-2 rounded-full" style="width: 78%"></div>
              </div>
              
              <div class="flex justify-between text-sm mt-3">
                <span class="text-gray-500">任务进度:</span>
                <span class="font-medium">65%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-primary h-2 rounded-full" style="width: 65%"></div>
              </div>
            </div>
            
            <div class="mt-4 flex justify-end">
              <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
                查看详情
              </button>
            </div>
          </div>
          
          <!-- 机器人2 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">配送机器人 B3</h3>
                <p class="text-sm text-gray-500">3号区域</p>
              </div>
              <span class="px-3 py-1 bg-warning/10 text-warning text-xs rounded-full">充电中</span>
            </div>
            
            <div class="flex justify-center my-4">
              <img src="https://picsum.photos/id/250/120/120" alt="配送机器人" class="w-32 h-32 object-cover rounded-lg">
            </div>
            
            <div class="mt-4 space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-500">电池电量:</span>
                <span class="font-medium">32%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-warning h-2 rounded-full" style="width: 32%"></div>
              </div>
              
              <div class="flex justify-between text-sm mt-3">
                <span class="text-gray-500">下次任务:</span>
                <span class="font-medium">11:30</span>
              </div>
            </div>
            
            <div class="mt-4 flex justify-end">
              <button class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
                查看详情
              </button>
            </div>
          </div>
          
          <!-- 机器人3 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-4">
              <div>
                <h3 class="font-semibold text-lg">安防机器人 S2</h3>
                <p class="text-sm text-gray-500">2号区域</p>
              </div>
              <span class="px-3 py-1 bg-danger/10 text-danger text-xs rounded-full">故障</span>
            </div>
            
            <div class="flex justify-center my-4">
              <img src="https://picsum.photos/id/180/120/120" alt="安防机器人" class="w-32 h-32 object-cover rounded-lg">
            </div>
            
            <div class="mt-4 space-y-2">
              <div class="flex justify-between text-sm">
                <span class="text-gray-500">电池电量:</span>
                <span class="font-medium">15%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-danger h-2 rounded-full" style="width: 15%"></div>
              </div>
              
              <div class="flex justify-between text-sm mt-3">
                <span class="text-gray-500">故障原因:</span>
                <span class="font-medium text-danger">传感器故障</span>
              </div>
            </div>
            
            <div class="mt-4 flex justify-end">
              <button class="px-4 py-2 bg-danger text-white rounded-lg text-sm hover:bg-danger/90 transition-colors">
                报修
              </button>
            </div>
          </div>
        </div>
        
        <!-- 机器人任务统计 -->
        <div class="mt-6 grid grid-cols-1 lg:grid-cols-2 gap-6">
          <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-lg mb-4">今日任务完成情况</h3>
            <div class="h-64">
              <canvas id="taskChart"></canvas>
            </div>
          </div>
          
          <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="font-semibold text-lg mb-4">机器人运行状态分布</h3>
            <div class="h-64">
              <canvas id="statusChart"></canvas>
            </div>
          </div>
        </div>
      </section>

      <!-- 设置页面 - OTA升级检查 -->
      <section id="settings" class="mb-10 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-2xl font-bold text-secondary">系统设置</h2>
          <div class="text-sm text-gray-500">
            <span id="current-time-settings">2025-11-18 10:30:00</span>
          </div>
        </div>
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- OTA升级检查面板 -->
          <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6 card-hover">
            <div class="flex justify-between items-start mb-6">
              <div>
                <h3 class="font-semibold text-lg">系统OTA升级</h3>
                <p class="text-sm text-gray-500">检查并升级到最新系统版本</p>
              </div>
              <div class="flex space-x-2">
                <button id="checkUpdateBtn" class="px-4 py-2 bg-primary text-white rounded-lg text-sm hover:bg-primary/90 transition-colors">
                  <i class="fa fa-refresh mr-1"></i> 检查更新
                </button>
                <button id="startUpdateBtn" class="px-4 py-2 bg-success text-white rounded-lg text-sm hover:bg-success/90 transition-colors hidden">
                  <i class="fa fa-download mr-1"></i> 开始升级
                </button>
              </div>
            </div>
            
            <!-- 当前版本信息 -->
            <div class="mb-6 p-4 bg-gray-50 rounded-lg">
              <div class="flex justify-between items-center">
                <div>
                  <span class="text-sm text-gray-500">当前版本</span>
                  <p class="font-medium mt-1">v2.3.5</p>
                </div>
                <div id="latestVersion" class="text-right">
                  <span class="text-sm text-gray-500">最新版本</span>
                  <p class="font-medium mt-1">检查中...</p>
                </div>
              </div>
            </div>
            
            <!-- 升级进度指示器 -->
            <div class="mb-6">
              <div class="flex justify-between text-sm mb-2">
                <span>升级进度</span>
                <span id="updateProgressText">0%</span>
              </div>
              <div class="progress-bar">
                <div id="updateProgressBar" class="progress-fill"></div>
              </div>
            </div>
            
            <!-- OTA升级步骤 -->
            <div class="space-y-1" id="otaSteps">
              <div class="ota-step" data-step="checking">
                <div class="flex items-center">
                  <div class="step-icon mr-3 bg-gray-100">
                    <i class="fa fa-search text-gray-500"></i>
                  </div>
                  <span>检查更新包</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 step-status">等待检查</span>
                </div>
              </div>
              
              <div class="ota-step" data-step="downloading">
                <div class="flex items-center">
                  <div class="step-icon mr-3 bg-gray-100">
                    <i class="fa fa-download text-gray-500"></i>
                  </div>
                  <span>下载更新包</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 step-status">等待下载</span>
                </div>
              </div>
              
              <div class="ota-step" data-step="verifying">
                <div class="flex items-center">
                  <div class="step-icon mr-3 bg-gray-100">
                    <i class="fa fa-shield text-gray-500"></i>
                  </div>
                  <span>验证更新包</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 step-status">等待验证</span>
                </div>
              </div>
              
              <div class="ota-step" data-step="installing">
                <div class="flex items-center">
                  <div class="step-icon mr-3 bg-gray-100">
                    <i class="fa fa-cogs text-gray-500"></i>
                  </div>
                  <span>安装更新</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 step-status">等待安装</span>
                </div>
              </div>
              
              <div class="ota-step" data-step="rebooting">
                <div class="flex items-center">
                  <div class="step-icon mr-3 bg-gray-100">
                    <i class="fa fa-refresh text-gray-500"></i>
                  </div>
                  <span>系统重启</span>
                </div>
                <div class="flex items-center">
                  <span class="text-sm text-gray-500 step-status">等待重启</span>
                </div>
              </div>
            </div>
            
            <!-- 升级结果总结 -->
            <div id="updateResult" class="mt-6 p-4 rounded-lg hidden">
              <div class="flex items-center mb-2">
                <div id="resultIcon" class="w-8 h-8 rounded-full flex items-center justify-center mr-3"></div>
                <h4 id="resultTitle" class="font-medium"></h4>
              </div>
              <p id="resultDescription" class="text-sm text-gray-600"></p>
            </div>
          </div>
          
          <!-- 系统信息面板 -->
          <div class="bg-white rounded-xl shadow-sm p-6 card-hover">
            <h3 class="font-semibold text-lg mb-4">系统信息</h3>
            
            <div class="space-y-4">
              <div>
                <h4 class="text-sm text-gray-500 mb-1">当前版本</h4>
                <p class="font-medium">v2.3.5</p>
              </div>
              
              <div>
                <h4 class="text-sm text-gray-500 mb-1">上次更新时间</h4>
                <p class="font-medium">2025-10-28 09:15:33</p>
              </div>
              
              <div>
                <h4 class="text-sm text-gray-500 mb-1">更新通道</h4>
                <p class="font-medium">稳定版</p>
              </div>
              
              <div>
                <h4 class="text-sm text-gray-500 mb-1">更新包大小</h4>
                <p class="font-medium">~245 MB</p>
              </div>
              
              <div class="pt-4 border-t border-gray-100">
                <h4 class="text-sm text-gray-500 mb-2">升级注意事项</h4>
                <ul class="text-sm text-gray-600 space-y-2">
                  <li class="flex items-start">
                    <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                    <span>升级过程中请勿关闭电源</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                    <span>系统将重启1-2次，耗时约5分钟</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-info-circle text-primary mt-1 mr-2"></i>
                    <span>升级前请确保设备电量充足</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
  
  <!-- 移动端侧边栏遮罩 -->
  <div id="sidebar-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden md:hidden"></div>
  
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <script>
    // 电梯状态变量
    const elevatorState = {
      currentFloor: 1,       // 当前楼层
      targetFloor: 1,        // 目标楼层
      isMoving: false,       // 是否正在移动
      doorsOpen: false,      // 门是否打开
      requestQueue: []       // 请求队列
    };
    
    // DOM元素
    const elevatorCab = document.getElementById('elevatorCab');
    const elevatorDoors = document.getElementById('elevatorDoors');
    const currentFloorDisplay = document.getElementById('currentFloorDisplay');
    const floorButtons = document.querySelectorAll('.floor-btn, .quick-floor-btn');
    const openDoorBtn = document.getElementById('openDoorBtn');
    const closeDoorBtn = document.getElementById('closeDoorBtn');
    const elevatorStatusText = document.getElementById('elevatorStatusText');
    const sendCommandBtn = document.getElementById('sendCommandBtn');
    const elevatorSelect = document.getElementById('elevatorSelect');
    const targetFloorSelect = document.getElementById('targetFloorSelect');
    
    // 状态显示元素
    const statusFloor = document.getElementById('statusFloor');
    const statusRunning = document.getElementById('statusRunning');
    const statusDoors = document.getElementById('statusDoors');
    
    // 更新状态显示
    function updateStatusDisplay() {
      statusFloor.textContent = `${elevatorState.currentFloor}F`;
      currentFloorDisplay.textContent = `${elevatorState.currentFloor}F`;
      statusRunning.textContent = elevatorState.isMoving ? '运行中' : '静止';
      statusDoors.textContent = elevatorState.doorsOpen ? '打开' : '关闭';
      
      // 更新电梯状态标签
      if (elevatorState.isMoving) {
        elevatorStatusText.textContent = '运行中';
        elevatorStatusText.className = 'px-3 py-1 bg-success/10 text-success text-xs rounded-full';
      } else if (elevatorState.doorsOpen) {
        elevatorStatusText.textContent = '门打开';
        elevatorStatusText.className = 'px-3 py-1 bg-warning/10 text-warning text-xs rounded-full';
      } else {
        elevatorStatusText.textContent = '待命';
        elevatorStatusText.className = 'px-3 py-1 bg-primary/10 text-primary text-xs rounded-full';
      }
    }
    
    // 打开电梯门
    function openDoors() {
      if (elevatorState.isMoving) return; // 移动中不能开门
      
      elevatorDoors.classList.add('doors-open');
      elevatorState.doorsOpen = true;
      updateStatusDisplay();
    }
    
    // 关闭电梯门
    function closeDoors() {
      if (elevatorState.isMoving) return; // 移动中不能关门
      
      elevatorDoors.classList.remove('doors-open');
      elevatorState.doorsOpen = false;
      updateStatusDisplay();
    }
    
    // 移动到指定楼层
    function moveToFloor(targetFloor) {
      // 如果已经在目标楼层或正在移动，直接返回
      if (elevatorState.currentFloor === targetFloor || elevatorState.isMoving) {
        return;
      }
      
      // 如果门是打开的，先关门再移动
      if (elevatorState.doorsOpen) {
        closeDoors();
        // 等待门关闭后再移动
        setTimeout(() => {
          actuallyMoveToFloor(targetFloor);
        }, 700); // 等待门关闭动画完成
      } else {
        actuallyMoveToFloor(targetFloor);
      }
    }
    
    // 实际执行移动的函数
    function actuallyMoveToFloor(targetFloor) {
      elevatorState.isMoving = true;
      elevatorState.targetFloor = targetFloor;
      updateStatusDisplay();
      
      // 更新按钮状态
      updateButtonStates();
      
      // 计算目标位置 (每层高度180px)
      const targetPosition = (1 - targetFloor) * 180;
      
      // 应用移动动画
      elevatorCab.style.transform = `translateY(${targetPosition}px)`;
      
      // 移动完成后更新状态
      setTimeout(() => {
        elevatorState.currentFloor = targetFloor;
        elevatorState.isMoving = false;
        
        // 打开门
        openDoors();
        
        // 更新状态显示
        updateStatusDisplay();
        
        // 更新按钮状态
        updateButtonStates();
        
        // 处理下一个请求
        processNextRequest();
      }, 1500); // 移动动画持续时间
    }
    
    // 添加楼层请求
    function requestFloor(floor) {
      // 转换为数字
      floor = parseInt(floor);
      
      // 只处理1-3层，因为动画电梯只有3层
      if (floor < 1 || floor > 3) {
        // 对于高层，可以显示提示信息
        alert('动画演示电梯仅支持1-3层');
        return;
      }
      
      // 如果已经在请求队列中，不再添加
      if (elevatorState.requestQueue.includes(floor)) {
        return;
      }
      
      // 如果当前没有移动，直接前往目标楼层
      if (!elevatorState.isMoving && elevatorState.currentFloor !== floor) {
        elevatorState.requestQueue = [floor];
        moveToFloor(floor);
      } 
      // 否则添加到队列
      else if (elevatorState.currentFloor !== floor) {
        elevatorState.requestQueue.push(floor);
      }
      
      // 更新按钮状态
      updateButtonStates();
    }
    
    // 处理下一个请求
    function processNextRequest() {
      // 移除当前楼层的请求
      elevatorState.requestQueue = elevatorState.requestQueue.filter(floor => floor !== elevatorState.currentFloor);
      
      // 如果还有请求，处理下一个
      if (elevatorState.requestQueue.length > 0) {
        // 等待门打开一段时间后再关闭并前往下一楼层
        setTimeout(() => {
          closeDoors();
          setTimeout(() => {
            moveToFloor(elevatorState.requestQueue[0]);
          }, 700); // 等待门关闭
        }, 2000); // 门打开后停留2秒
      }
    }
    
    // 更新按钮状态
    function updateButtonStates() {
      floorButtons.forEach(button => {
        const floor = parseInt(button.dataset.floor);
        
        // 如果是当前楼层或在请求队列中，高亮显示
        if (floor === elevatorState.currentFloor || elevatorState.requestQueue.includes(floor)) {
          button.classList.add('active');
        } else {
          button.classList.remove('active');
        }
      });
    }
    
    // 更新当前时间
    function updateTime() {
      const now = new Date();
      const timeString = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      }).replace(',', '');
      
      document.getElementById('current-time').textContent = timeString;
      document.getElementById('current-time-gate').textContent = timeString;
      document.getElementById('current-time-robot').textContent = timeString;
    }
    
    // 导航菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const sidebar = document.querySelector('aside');
    const sidebarOverlay = document.getElementById('sidebar-overlay');
    const navItems = document.querySelectorAll('nav a');
    const sections = document.querySelectorAll('main > div > section');
    
    // 移动端侧边栏切换
    menuToggle.addEventListener('click', () => {
      sidebar.classList.toggle('hidden');
      sidebar.classList.toggle('absolute');
      sidebar.classList.toggle('top-0');
      sidebar.classList.toggle('left-0');
      sidebar.classList.toggle('h-full');
      sidebarOverlay.classList.toggle('hidden');
    });
    
    sidebarOverlay.addEventListener('click', () => {
      sidebar.classList.add('hidden');
      sidebarOverlay.classList.add('hidden');
    });
    
    // 导航项点击事件
    navItems.forEach((item, index) => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
        
        // 更新导航项激活状态
        navItems.forEach(nav => nav.classList.remove('sidebar-item-active', 'text-primary'));
        navItems.forEach(nav => nav.classList.add('text-gray-600'));
        item.classList.add('sidebar-item-active');
        item.classList.remove('text-gray-600');
        
        // 显示对应的内容区域
        sections.forEach(section => section.classList.add('hidden'));
        if (index < sections.length) {
          sections[index].classList.remove('hidden');
        }
        
        // 移动端点击后关闭侧边栏
        if (window.innerWidth < 768) {
          sidebar.classList.add('hidden');
          sidebarOverlay.classList.add('hidden');
        }
      });
    });
    
    // 初始化图表
    function initCharts() {
      // 任务完成情况图表
      const taskCtx = document.getElementById('taskChart').getContext('2d');
      new Chart(taskCtx, {
        type: 'bar',
        data: {
          labels: ['清洁A1', '清洁A2', '配送B1', '配送B3', '安防S1', '安防S2'],
          datasets: [{
            label: '已完成任务',
            data: [12, 8, 15, 7, 20, 5],
            backgroundColor: '#165DFF',
          }, {
            label: '未完成任务',
            data: [3, 5, 2, 8, 0, 10],
            backgroundColor: '#E5E7EB',
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          scales: {
            x: { stacked: true },
            y: { stacked: true, beginAtZero: true }
          }
        }
      });
      
      // 状态分布图表
      const statusCtx = document.getElementById('statusChart').getContext('2d');
      new Chart(statusCtx, {
        type: 'doughnut',
        data: {
          labels: ['工作中', '待命', '充电中', '故障'],
          datasets: [{
            data:  [45, 20, 25, 10],
            backgroundColor: [
              '#52C41A',
              '#165DFF',
              '#FAAD14',
              '#FF4D4F'
            ]
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom'
            }
          }
        }
      });
    }
    
    // 事件监听
    floorButtons.forEach(button => {
      button.addEventListener('click', () => {
        const targetFloor = button.dataset.floor;
        requestFloor(targetFloor);
        
        // 更新下拉选择框
        targetFloorSelect.value = targetFloor;
      });
    });
    
    // 开门关门按钮
    openDoorBtn.addEventListener('click', openDoors);
    closeDoorBtn.addEventListener('click', closeDoors);
    
    // 发送指令按钮
    sendCommandBtn.addEventListener('click', () => {
      const selectedElevator = elevatorSelect.value;
      const targetFloor = targetFloorSelect.value;
      
      // 对于1号和2号电梯，我们只演示动画电梯的响应
      if (selectedElevator === '1' || selectedElevator === '2') {
        requestFloor(targetFloor);
      }
    });
    
    // 初始化
    window.addEventListener('load', () => {
      // 初始化时间并每秒更新
      updateTime();
      setInterval(updateTime, 1000);
      
      // 初始化状态显示
      updateStatusDisplay();
      
      // 仅在机器人状态区域可见时初始化图表
      if (!document.getElementById('robot').classList.contains('hidden')) {
        initCharts();
      }
      
      // 当切换到机器人状态区域时初始化图表
      navItems[2].addEventListener('click', initCharts, { once: true });
    });
  </script>
  <script>
    // OTA升级检查功能实现
    document.addEventListener('DOMContentLoaded', function() {
      const checkUpdateBtn = document.getElementById('checkUpdateBtn');
      const startUpdateBtn = document.getElementById('startUpdateBtn');
      const otaSteps = document.querySelectorAll('.ota-step');
      const updateProgressBar = document.getElementById('updateProgressBar');
      const updateProgressText = document.getElementById('updateProgressText');
      const updateResult = document.getElementById('updateResult');
      const resultIcon = document.getElementById('resultIcon');
      const resultTitle = document.getElementById('resultTitle');
      const resultDescription = document.getElementById('resultDescription');
      const latestVersionEl = document.querySelector('#latestVersion p');
      const updateIndicator = document.getElementById('updateIndicator');
      
      // 模拟有新版本可用
      let hasNewVersion = true;
      const newVersion = "v2.4.0";
      
      // 检查更新按钮点击事件
      checkUpdateBtn.addEventListener('click', checkForUpdates);
      
      // 开始升级按钮点击事件
      startUpdateBtn.addEventListener('click', startOTAUpdate);
      
      // 检查更新
      function checkForUpdates() {
        // 重置状态
        resetUpdateState();
        
        // 禁用检查按钮，显示加载状态
        checkUpdateBtn.disabled = true;
        checkUpdateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 检查中...';
        checkUpdateBtn.classList.add('bg-gray-400');
        checkUpdateBtn.classList.remove('bg-primary', 'hover:bg-primary/90');
        
        // 更新最新版本显示
        latestVersionEl.textContent = '检查中...';
        
        // 模拟检查过程
        setTimeout(() => {
          if (hasNewVersion) {
            // 有新版本
            latestVersionEl.textContent = newVersion;
            latestVersionEl.classList.add('text-success');
            
            // 显示更新指示器和升级按钮
            updateIndicator.classList.remove('hidden');
            startUpdateBtn.classList.remove('hidden');
            
            // 更新结果提示
            showUpdateResult('info', '发现新版本', `检测到最新版本 ${newVersion}，建议立即升级`);
          } else {
            // 无新版本
            latestVersionEl.textContent = '当前已是最新版本';
            
            // 隐藏升级按钮
            startUpdateBtn.classList.add('hidden');
            
            // 更新结果提示
            showUpdateResult('success', '已是最新版本', '您的系统当前已是最新版本，无需升级');
          }
          
          // 恢复按钮状态
          checkUpdateBtn.disabled = false;
          checkUpdateBtn.innerHTML = '<i class="fa fa-refresh mr-1"></i> 检查更新';
          checkUpdateBtn.classList.remove('bg-gray-400');
          checkUpdateBtn.classList.add('bg-primary', 'hover:bg-primary/90');
        }, 2000); // 模拟2秒检查时间
      }
      
      // 开始OTA升级
      function startOTAUpdate() {
        // 重置状态
        resetUpdateState();
        
        // 禁用按钮
        checkUpdateBtn.disabled = true;
        startUpdateBtn.disabled = true;
        startUpdateBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-1"></i> 升级中...';
        startUpdateBtn.classList.remove('hover:bg-success/90');
        
        // 隐藏结果提示
        updateResult.classList.add('hidden');
        
        // 升级步骤和进度配置
        const stepsConfig = [
          { step: 'checking', duration: 2000, status: 'completed', message: '更新包检查完成' },
          { step: 'downloading', duration: 4000, status: 'completed', message: '更新包下载完成' },
          { step: 'verifying', duration: 3000, status: 'completed', message: '更新包验证通过' },
          { step: 'installing', duration: 5000, status: 'completed', message: '更新安装完成' },
          { step: 'rebooting', duration: 3000, status: 'completed', message: '系统重启完成' }
        ];
        
        // 逐个执行升级步骤
        let delay = 0;
        const totalSteps = stepsConfig.length;
        
        stepsConfig.forEach((config, index) => {
          delay += config.duration;
          
          setTimeout(() => {
            // 处理当前步骤
            const stepElement = document.querySelector(`[data-step="${config.step}"]`);
            const statusElement = stepElement.querySelector('.step-status');
            const iconElement = stepElement.querySelector('.step-icon');
            
            // 移除所有步骤的激活状态
            otaSteps.forEach(step => step.classList.remove('step-active'));
            
            // 标记当前步骤为激活
            stepElement.classList.add('step-active');
            
            // 更新状态文本和图标（显示加载中动画）
            statusElement.textContent = '处理中...';
            iconElement.innerHTML = '<div class="relative w-5 h-5"><div class="pulse-ring"></div><div class="pulse-dot"></div></div>';
            iconElement.classList.remove('bg-gray-100', 'bg-success/10', 'bg-danger/10');
            iconElement.classList.add('bg-primary/10');
            
            // 模拟步骤处理时间
            setTimeout(() => {
              // 更新步骤状态
              stepElement.classList.remove('step-active');
              stepElement.classList.add(`step-${config.status}`);
              
              // 更新图标和状态文本
              if (config.status === 'completed') {
                iconElement.innerHTML = '<i class="fa fa-check text-success"></i>';
                iconElement.classList.remove('bg-primary/10');
                iconElement.classList.add('bg-success/10');
                statusElement.textContent = config.message;
                statusElement.classList.add('text-success');
              } else {
                iconElement.innerHTML = '<i class="fa fa-times text-danger"></i>';
                iconElement.classList.remove('bg-primary/10');
                iconElement.classList.add('bg-danger/10');
                statusElement.textContent = '处理失败';
                statusElement.classList.add('text-danger');
              }
              
              // 更新进度
              const progress = Math.round(((index + 1) / totalSteps) * 100);
              updateProgressBar.style.width = `${progress}%`;
              updateProgressText.textContent = `${progress}%`;
              
              // 所有步骤完成
              if (index === totalSteps - 1) {
                setTimeout(() => {
                  // 更新版本信息
                  document.querySelector('#latestVersion p').textContent = newVersion;
                  document.querySelector('#latestVersion p').classList.add('text-success');
                  document.querySelector('.font-medium.mt-1').textContent = newVersion;
                  
                  // 隐藏更新指示器
                  updateIndicator.classList.add('hidden');
                  
                  // 显示完成结果
                  showUpdateResult('success', '系统升级完成', `系统已成功升级至 ${newVersion}，所有功能正常`);
                  
                  // 恢复按钮状态
                  checkUpdateBtn.disabled = false;
                  startUpdateBtn.disabled = false;
                  startUpdateBtn.innerHTML = '<i class="fa fa-download mr-1"></i> 开始升级';
                  startUpdateBtn.classList.add('hover:bg-success/90');
                  startUpdateBtn.classList.add('hidden');
                  
                  // 更新状态为无新版本
                  hasNewVersion = false;
                }, 1000);
              }
            }, config.duration - 500); // 减去前面的延迟
          }, index === 0 ? 500 : delay - 500);
        });
      }
      
      // 重置更新状态
      function resetUpdateState() {
        otaSteps.forEach(step => {
          step.classList.remove('step-active', 'step-completed', 'step-failed');
          const statusElement = step.querySelector('.step-status');
          const iconElement = step.querySelector('.step-icon');
          
          // 重置状态文本
          const stepName = step.dataset.step;
          const statusTexts = {
            checking: '等待检查',
            downloading: '等待下载',
            verifying: '等待验证',
            installing: '等待安装',
            rebooting: '等待重启'
          };
          
          statusElement.textContent = statusTexts[stepName];
          statusElement.classList.remove('text-success', 'text-danger');
          
          // 重置图标
          const iconClasses = {
            checking: 'fa-search',
            downloading: 'fa-download',
            verifying: 'fa-shield',
            installing: 'fa-cogs',
            rebooting: 'fa-refresh'
          };
          
          iconElement.innerHTML = `<i class="fa ${iconClasses[stepName]} text-gray-500"></i>`;
          iconElement.classList.remove('bg-primary/10', 'bg-success/10', 'bg-danger/10');
          iconElement.classList.add('bg-gray-100');
        });
        
        // 重置进度条
        updateProgressBar.style.width = '0%';
        updateProgressText.textContent = '0%';
        
        // 隐藏结果提示
        updateResult.classList.add('hidden');
        
        // 重置版本显示样式
        latestVersionEl.classList.remove('text-success');
      }
      
      // 显示更新结果
      function showUpdateResult(type, title, description) {
        // 设置结果样式和内容
        if (type === 'success') {
          resultIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center mr-3 bg-success/10';
          resultIcon.innerHTML = '<i class="fa fa-check text-success"></i>';
          resultTitle.textContent = title;
          resultTitle.className = 'font-medium text-success';
        } else if (type === 'error') {
          resultIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center mr-3 bg-danger/10';
          resultIcon.innerHTML = '<i class="fa fa-exclamation-triangle text-danger"></i>';
          resultTitle.textContent = title;
          resultTitle.className = 'font-medium text-danger';
        } else {
          resultIcon.className = 'w-8 h-8 rounded-full flex items-center justify-center mr-3 bg-primary/10';
          resultIcon.innerHTML = '<i class="fa fa-info text-primary"></i>';
          resultTitle.textContent = title;
          resultTitle.className = 'font-medium text-primary';
        }
        
        resultDescription.textContent = description;
        updateResult.classList.remove('hidden');
      }
      
      // 更新当前时间
      function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleString('zh-CN', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }).replace(',', '');
        
        document.getElementById('current-time-settings').textContent = timeString;
      }
      
      // 初始化时间并每秒更新
      updateTime();
      setInterval(updateTime, 1000);
      
      // 导航菜单切换逻辑
      const menuToggle = document.getElementById('menu-toggle');
      const sidebar = document.querySelector('aside');
      const sidebarOverlay = document.getElementById('sidebar-overlay');
      
      menuToggle.addEventListener('click', () => {
        sidebar.classList.toggle('hidden');
        sidebar.classList.toggle('absolute');
        sidebar.classList.toggle('top-0');
        sidebar.classList.toggle('left-0');
        sidebar.classList.toggle('h-full');
        sidebarOverlay.classList.toggle('hidden');
      });
      
      sidebarOverlay.addEventListener('click', () => {
        sidebar.classList.add('hidden');
        sidebarOverlay.classList.add('hidden');
      });
    });
  </script>
</body>
</html>